/***
Buttons in SleekMobile are created using the `@button` mixin.

Using only `@button` on a single `a` element will give you this: [Only `@button`](#first). Buttons are by default inline.

Without a [theme](?doc=themes) the buttons are transparent with default text color. To theme your button simply include one of the themes (`@theme-a` for example) next to your `@button` include. Pass in `true` as the only argument to `theme-x()` to make your button interactive (react on hover and focus).

[Nicer with a theme](#second)

Buttons need only one HTML element for all styling. You can use any element you like.

If you want a block level button you can use `@button-block`. There's also a `@button-inline` in case you need to switch back.

[A block level button](#third)

### Button sets

To create a set of buttons, simply wrap all buttons in at least one wrapping element (`nav` is suitable). You're free to use a list element (`ul`) as well or even wrap the `ul` in a `nav`.

<div class="horizontal">
	<h4>Horizontal</h4>
	<p>To create a list of horizontal buttons simply include <code>@buttons</code> in your wrapping element. Button sets are by default inline and centered.</p>
	<nav>
		<a href="#">Home</a> 
		<a href="#">About</a> 
		<a href="#">Contact</a>
	</nav>
</div>

<div class="vertical">
	<h4>Vertical</h4>
	<p>Vertical lists of buttons are created using <code>@buttons-block</code>.</p>
	<ul>
		<li><a href="#">Continue</a></li>
		<li><a href="#">Cancel</a></li>
	</ul>
</div>

<div class="connected">
	<h4>Connected</h4>
	<p>Connected buttons are created using <code>@buttons-connected</code>. You can change the alignment by passing it in as an argument to <code>@buttons</code>, <code>@buttons-block</code> or <code>@buttons-connected</code>: <code>@buttons-connected(left)</code> for example.</p>
	<nav>
		<ul>
			<li><a href="#copy">Copy</a></li>
			<li><a href="#cut">Cut</a></li>
			<li><a href="#paste">Paste</a></li>
		</ul>
	</nav>
</div>
***/
// Base button
@mixin button ($align: center) {
	display: inline-block;

	margin: 0;
	padding: $padding-top-bottom $padding-left-right;

	border: 1px solid;

	@include border-radius($border-radius * 2);

	@if $default-shadow == none {
		@include box-shadow(inset 1px 1px 1px $shadow-color-light);
	}
	@else {
		-mox-box-shadow: $default-shadow, inset 1px 1px 1px $shadow-color-light;
		-webkit-box-shadow: $default-shadow, inset 1px 1px 1px $shadow-color-light;
		-ms-box-shadow: $default-shadow, inset 1px 1px 1px $shadow-color-light;
		-o-box-shadow: $default-shadow, inset 1px 1px 1px $shadow-color-light;
		box-shadow: $default-shadow, inset 1px 1px 1px $shadow-color-light;
	}

	font-weight: bold;
	text-decoration: none;
	text-align: $align;
}

// Inline button
@mixin button-inline ($align: center, $all: true) {
	@if $all {
		@include button($align);
	}

	display: inline-block;
}

// Block button
@mixin button-block ($align: center, $all: true) {
	@if $all {
		@include button($align);
	}

	display: block;
}

/**
 * Buttons
 *
 * A collection of many buttons
 **/
@mixin buttons ($align: center) {
	display: block;

	margin: 0 0 $margin-bottom;
	padding: 0;
	list-style: none;

	text-align: $align;

	ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	li {
		margin: 0;
		display: inline;
	}

	a {
		@include button-inline($align);
	}
}

@mixin buttons-inline ($align: center, $all: true) {
	@if $all {
		@include buttons($align);
	}

	li {
		display: inline;
	}

	a {
		@include button-inline($align, false);
	}
}

@mixin buttons-block ($align: center, $all: true) {
	@if $all {
		@include buttons($align);
	}

	li {
		display: block;
	}

	a {
		@include button-block($align, false);
		margin: 0 0 $margin-bottom / 2;
	}
}

@mixin buttons-connected ($align: center, $all: true) {
	@if $all {
		@include buttons($align);
	}

	font-size: 0;

	li {
		display: inline;
	}

	a {
		@include button-inline($align, false);
		@include border-radius(0);

		font-size: $default-size;
	}

	> a:first-child, 
	li:first-child a {
		@include border-top-left-radius($border-radius);
		@include border-bottom-left-radius($border-radius);
	}

	> a:last-child, 
	li:last-child a {
		@include border-top-right-radius($border-radius);
		@include border-bottom-right-radius($border-radius);
	}
}

@mixin buttons-connected-block ($align: center, $all: true) {
	@if $all {
		@include buttons($align);
	}

	li {
		display: block;
	}

	a {
		@include button-block($align, false);
		@include border-radius(0);
		margin: 0;
	}

	> a:first-child, 
	li:first-child a {
		@include border-top-left-radius($border-radius);
		@include border-top-right-radius($border-radius);
	}

	> a:last-child, 
	li:last-child a {
		@include border-bottom-left-radius($border-radius);
		@include border-bottom-right-radius($border-radius);
	}
}

// Themes
@mixin buttons-theme-a {
	a {
		@include theme-a(true);
	}
}

@mixin buttons-theme-b {
	a {
		@include theme-b(true);
	}
}

@mixin buttons-theme-c {
	a {
		@include theme-c(true);
	}
}

@mixin buttons-theme-d {
	a {
		@include theme-d(true);
	}
}

@mixin buttons-theme-e {
	a {
		@include theme-e(true);
	}
}

@mixin buttons-theme-f {
	a {
		@include theme-f(true);
	}
}
